<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div v-if="!showDetail">
      <div class="table">
        <div class="container">
          <el-table
            v-loading="MakeComListLoading"
            :data="MakeComListTableData"
            max-height="800"
            style="width: 100%"
          >
            <el-table-column fixed prop="Id" label="序号" width="120">
            </el-table-column>
            <el-table-column prop="MakeCom" label="制造单位" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="text-decoration: underline; color: #606266"
                  @click="gotoDetail(scope.row.MakeCom)"
                  >{{ scope.row.MakeCom }}</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="MakeGasCount" label="制造台数" width="100">
            </el-table-column>
            <el-table-column prop="" label="制造许可证编号" width="250">
            </el-table-column>
            <el-table-column prop="" label="单位地址" width="150">
            </el-table-column>
            <el-table-column prop="" label="联系人" width="200">
            </el-table-column>
            <el-table-column prop="" label="联系电话" width="100">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="makeComListTablePageSizeChange"
            @current-change="makeComListTablePageChange"
            :current-page="MakeComListCurrentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="MakeComListArgs.num"
            layout="total, sizes, prev, pager, next, jumper"
            :total="MakeComListTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <div v-if="showDetail">
      <div class="detail-container">
        <div class="text-cards">
          <div class="text-card">
            <span class="yello">服务单位总量</span>
            <span class="yello">{{ MakeComDetailData.SydwCount + "家" }}</span>
          </div>
          <div class="text-card">
            <span class="yello">制造气瓶总量</span>
            <span class="yello">{{
              MakeComDetailData.MakeGasCount + "只"
            }}</span>
          </div>
          <div class="text-card">
            <span class="red">充装次数≥100次</span>
            <span class="red">{{ MakeComDetailData.RecordGT100 + "只" }}</span>
          </div>
          <div class="text-card">
            <span class="red">制造时间≥12年</span>
            <span class="red">{{
              MakeComDetailData.MakeGT12Years + "只"
            }}</span>
          </div>
        </div>
        <div class="charts">
          <div class="chart">
            <div
              id="gas-distribution"
              style="min-width: 400px; height: 400px"
            ></div>
          </div>
          <div class="chart">
            <div id="gas-type" style="min-width: 400px; height: 400px"></div>
          </div>
          <div class="chart">
            <div id="gas-media" style="min-width: 400px; height: 400px"></div>
          </div>
          <div class="chart">
            <div id="make-time" style="min-width: 400px; height: 400px"></div>
          </div>
        </div>
        <div class="table">
          <div class="container">
            <el-table
              v-loading="MakeComSydwListLoading"
              :data="MakeComSydwListTableData"
              height="400"
              style="width: 100%"
            >
              <el-table-column fixed prop="Id" label="序号" width="110">
              </el-table-column>
              <el-table-column label="使用单位" width="130">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    style="text-decoration: underline; color: #606266"
                    @click="selectSydw(scope.row.SydwId)"
                    >{{ scope.row.SydwName }}</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column prop="GasCount" label="数量" width="110">
              </el-table-column>
              <el-table-column prop="Address" label="单位地址" width="110">
              </el-table-column>
              <el-table-column prop="Manager" label="管理员" width="110">
              </el-table-column>
              <el-table-column prop="Telphone" label="联系电话" width="110">
              </el-table-column>
            </el-table>
          </div>
          <div class="container">
            <el-table
              v-loading="MakeComSydwGasListLoading"
              :data="MakeComSydwGasListTableData"
              height="400"
              style="width: 100%"
            >
              <el-table-column fixed prop="Id" label="序号" width="110">
              </el-table-column>
              <el-table-column prop="RegId" label="出厂编号" width="110">
              </el-table-column>
              <el-table-column prop="GasType" label="气瓶品种" width="110">
              </el-table-column>
              <el-table-column
                prop="PublicPressure"
                label="公称工作压力"
                width="110"
              >
              </el-table-column>
              <el-table-column prop="RealVolume" label="公称容积" width="110">
              </el-table-column>
              <el-table-column prop="Media" label="充装介质" width="110">
              </el-table-column>
              <el-table-column prop="MakeDate" label="制造年月" width="110">
              </el-table-column>
              <el-table-column prop="RecordCount" label="充装次数" width="110">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="page">
          <div class="container sydw-list">
            <el-pagination
              background
              @size-change="makeComSydwListTablePageSizeChange"
              @current-change="makeComSydwListTablePageChange"
              :current-page="MakeComSydwListCurrentPage"
              :page-sizes="[10, 15, 20, 40]"
              :page-size="MakeComSydwListArgs.num"
              layout="total, sizes, prev, pager, next, jumper"
              :total="MakeComSydwListTotal"
            >
            </el-pagination>
          </div>
          <div class="container sydw-gas-list">
            <el-pagination
              background
              @size-change="makeComSydwGasListTablePageSizeChange"
              @current-change="makeComSydwGasListTablePageChange"
              :current-page="MakeComSydwGasListCurrentPage"
              :page-sizes="[10, 15, 20, 40]"
              :page-size="MakeComSydwGasListArgs.num"
              layout="total, sizes, prev, pager, next, jumper"
              :total="MakeComSydwGasListTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
import {
  MakeComListSearchArgs,
  MakeComDetailSearchArgs,
  MakeComSydwListSearchArgs,
  MakeComSydwGasListSearchArgs,
  searchMakeComList,
  searchMakeComDetailData,
  searchMakeComSydwList,
  searchMakeComSydwGasList,
} from "../../../../api/qiping/data-service";
import Highcharts from "highcharts/highstock";
export default {
  data() {
    return {
      // 制造单位
      MakeCom: "",

      // 显示模式
      showDetail: false, // 默认显示制造单位列表表格

      // 导航树相关数据
      naviBasicItems: [
        { text: "气瓶" },
        { text: "云服制造", to: "/qiping/dataservice/make" },
      ],
      naviItems: [],

      // 表格相关数据
      gasTypeChart: null,
      mediaChart: null,
      gasDistributionChart: null,
      gasMakeYearsChart: null,

      // 制造单位列表表格相关数据
      MakeComListLoading: true,
      MakeComListTableData: [],
      MakeComListTotal: 0,
      MakeComListCurrentPage: 1,
      MakeComListArgs: new MakeComListSearchArgs(),

      // 某个制造单位的使用单位的列表表格相关数据
      MakeComSydwListLoading: true,
      MakeComSydwListTableData: [],
      MakeComSydwListTotal: 0,
      MakeComSydwListCurrentPage: 1,
      MakeComSydwListArgs: new MakeComSydwListSearchArgs(),

      // 某个制造单位的某个使用单位的气瓶列表表格相关数据
      MakeComSydwGasListLoading: false,
      MakeComSydwGasListTableData: [],
      MakeComSydwGasListTotal: 0,
      MakeComSydwGasListCurrentPage: 1,
      MakeComSydwGasListArgs: new MakeComSydwGasListSearchArgs(),

      // 某个制造单位的详情统计数据
      MakeComDetailData: {
        SydwCount: 0,
        MakeGasCount: 0,
        RecordGT100: 0,
        MakeGT12Years: 0,
      },
      MakeComDetailArgs: new MakeComDetailSearchArgs(),

      // 选中的使用单位
      selectSydwId: "",
    };
  },
  async created() {
    if (!this.$route.params.MakeCom) {
      // url不带MakeCom,进入制造单位列表表格界面
      // 表格界面的一些参数的初始化
      this.naviItems = [...this.naviBasicItems];
      this.showDetail = false;
      // 获取制造单位列表数据
      await this.searchMakeComList();
    } else {
      // url带MakeCom，进入MakeCom对应的详情界面
      // 详情界面的一些参数的初始化
      // 集成到当前项目后由于vue-admin-template的一些特性，一级菜单重定向时不能识别路由参数，故在此重新重定向一次
      if (this.$route.params.MakeCom == ":MakeCom") {
        this.$router.replace({
          name: "qiping-dataService-make",
        });
      }
      this.MakeCom = this.$route.params.MakeCom;
      this.naviItems = [
        ...this.naviBasicItems,
        {
          text: this.MakeCom,
          to: "/qiping/dataservice/make" + "/" + this.$route.params.MakeCom,
          color: "red",
        },
      ];
      this.showDetail = true;
      await this.searchMakeComDetailData();
      await this.searchMakeComSydwList();
      if (this.MakeComSydwListTableData.length > 0) {
        // 默认选中第一个使用单位
        this.selectSydwId = this.MakeComSydwListTableData[0].SydwId;
        await this.searchMakeComSydwGasList();
      }
    }
  },
  components: {
    Breadcrumb,
  },
  methods: {
    // 获取制造单位列表数据
    async searchMakeComList() {
      this.MakeComListLoading = true;
      const res = await searchMakeComList(this.MakeComListArgs);
      this.MakeComListLoading = false;
      const { list, total } = res.data;
      this.MakeComListTableData = list;
      this.MakeComListTotal = +total;
    },
    // 制造单位列表表格页面大小改变
    async makeComListTablePageSizeChange(pageSize) {
      this.MakeComListArgs.num = pageSize;
      this.MakeComListArgs.offset = 0;
      await this.searchMakeComList();
    },
    // 制造单位列表表格页码改变
    async makeComListTablePageChange(page) {
      this.MakeComListArgs.offset = (page - 1) * this.MakeComListArgs.num;
      this.MakeComListCurrentPage = page;
      await this.searchMakeComList();
    },
    // 跳转到某个制造单位的详情页面
    gotoDetail(MakeCom) {
      this.$router.replace({
        name: "reload",
        params: {
          to: "/qiping/dataservice/make/" + MakeCom,
        },
      });
    },
    // 获取某个制造单位的详情数据
    async searchMakeComDetailData() {
      this.MakeComDetailArgs.MakeCom = this.MakeCom;
      const res = await searchMakeComDetailData(this.MakeComDetailArgs);
      this.MakeComDetailData = res.data;
      // 根据获取到的详情数据，绘制页面上一些图表
      // ...
      this.setDistributionChart(this.MakeComDetailData.DistributionInfo);
      this.setGasTypeChart(this.MakeComDetailData.GasTypeInfo);
      this.setMediaChart(this.MakeComDetailData.MediaInfo);
      this.setMakeYearsChart(this.MakeComDetailData.MakeYearsInfo);
    },
    // 获取制造单位的使用单位列表数据
    async searchMakeComSydwList() {
      this.MakeComSydwListLoading = true;
      this.MakeComSydwListArgs.MakeCom = this.MakeCom;
      const res = await searchMakeComSydwList(this.MakeComSydwListArgs);
      this.MakeComSydwListLoading = false;
      const { list, total } = res.data;
      this.MakeComSydwListTableData = list;
      this.MakeComSydwListTotal = +total;
    },
    // 制造单位的使用单位列表表格页面大小改变
    async makeComSydwListTablePageSizeChange(pageSize) {
      this.MakeComSydwListArgs.num = pageSize;
      this.MakeComSydwListArgs.offset = 0;
      await this.searchMakeComSydwList();
    },
    // 制造单位的使用单位列表表格页码改变
    async makeComSydwListTablePageChange(page) {
      this.MakeComSydwListArgs.offset =
        (page - 1) * this.MakeComSydwListArgs.num;
      this.MakeComSydwListCurrentPage = page;
      await this.searchMakeComSydwList();
    },
    // 获取制造单位的某个使用单位的气瓶列表数据
    async searchMakeComSydwGasList() {
      this.MakeComSydwGasListLoading = true;
      this.MakeComSydwGasListArgs.SydwId = this.selectSydwId;
      this.MakeComSydwGasListArgs.MakeCom = this.MakeCom;
      const res = await searchMakeComSydwGasList(this.MakeComSydwGasListArgs);
      this.MakeComSydwGasListLoading = false;
      const { list, total } = res.data;
      this.MakeComSydwGasListTableData = list;
      this.MakeComSydwGasListTotal = +total;
    },
    // 制造单位的某个使用单位的气瓶列表表格页面大小改变
    async makeComSydwGasListTablePageSizeChange(pageSize) {
      this.MakeComSydwGasListArgs.num = pageSize;
      this.MakeComSydwGasListArgs.offset = 0;
      await this.searchMakeComSydwGasList();
    },
    // 制造单位的某个使用单位的气瓶列表表格页码改变
    async makeComSydwGasListTablePageChange(page) {
      this.MakeComSydwGasListArgs.offset =
        (page - 1) * this.MakeComSydwGasListArgs.num;
      this.MakeComSydwGasListCurrentPage = page;
      await this.searchMakeComSydwGasList();
    },

    // 选中某个制造单位
    selectSydw(SydwId) {
      console.log("选中的单位", SydwId);
      this.selectSydwId = SydwId;
      this.searchMakeComSydwGasList();
    },

    async setGasTypeChart(gasTypeData) {
      const gasTypeChartOption = {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
        },
        title: {
          text: "气瓶种类",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: "气瓶品种",
            colorByPoint: true,
            data: [...gasTypeData],
          },
        ],
      };
      setTimeout(() => {
        this.gasTypeChart = new Highcharts.chart(
          "gas-type",
          gasTypeChartOption
        );
      }, 0);
    },

    async setMediaChart(mediaData) {
      const mediaChartOption = {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
        },
        title: {
          text: "充装介质",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: "充装介质",
            colorByPoint: true,
            data: [...mediaData],
          },
        ],
      };
      setTimeout(() => {
        this.mediaChart = new Highcharts.chart("gas-media", mediaChartOption);
      }, 0);
    },

    async setDistributionChart(DistributionInfo) {
      const distributionChartOption = {
        chart: {
          type: "column",
        },
        title: {
          text: "区域分布",
        },
        subtitle: {},
        xAxis: {
          type: "category",
          labels: {
            rotation: 0, // 设置轴标签旋转角度
          },
          title: {
            text: "地区",
          },
        },
        yAxis: {
          min: 0,
          title: {
            text: "气瓶数",
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: "气瓶数",
            data: [...DistributionInfo],
          },
        ],
      };
      setTimeout(() => {
        this.gasDistributionChart = new Highcharts.chart(
          "gas-distribution",
          distributionChartOption
        );
      }, 0);
    },
    async setMakeYearsChart(MakeYearsInfo) {
      const makeYearsChartOption = {
        chart: {
          type: "column",
        },
        title: {
          text: "制造时间",
        },
        subtitle: {},
        xAxis: {
          type: "category",
          labels: {
            rotation: 0, // 设置轴标签旋转角度
          },
          title: {
            text: "年份",
          },
        },
        yAxis: {
          min: 0,
          title: {
            text: "气瓶数",
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: "气瓶数",
            data: [...MakeYearsInfo],
          },
        ],
      };
      setTimeout(() => {
        this.gasMakeYearsChart = new Highcharts.chart(
          "make-time",
          makeYearsChartOption
        );
      }, 0);
    },
  },
};
</script>

<style lang="less" scoped>
div.table {
  width: 100%;
  margin-left: 60px;
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  // justify-content: center;
  div.container {
    width: 80%;
  }
}
div.page {
  width: 100%;
  display: flex;
  margin-top: 30px;
  flex-direction: row;
  justify-content: flex-end;
  position: relative;
  right: 300px;
}
div.detail-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  div.text-cards {
    width: 100%;
    display: flex;
    flex-direction: row;
    div.text-card {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      span {
        width: 98%;
        height: 40px;
        font-size: 17px;
        line-height: 40px;
        display: block;
        margin: 5px;
        text-align: center;
        font-weight: 700;
      }
      span.yello {
        color: black;
        background-color: #ffd966;
      }
      span.red {
        color: white;
        background-color: #ff0400;
      }
    }
  }
  div.charts {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
  }
  div.table {
    div.container {
      margin-left: -50px;
      width: 100%;
    }
  }
  div.page {
    margin-left: 240px;
    display: flex;
    flex-direction: row;
    div.container {
      margin-left: 10px;
      margin-right: 10px;
    }
    div.sydw-list {
      position: relative;
      left: -30px;
    }
  }
}
</style>